<template>
  <aside
    class="col col-xl-2 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12"
  >
    <div class="box mb-3 shadow-sm border rounded bg-white profile-box">
      <div class="mt-3 ml-3"><h4>首页</h4></div>
      <div class="mt-3 Myulli mb-3">
        <div @click="getMoodList()"><i class="iconfont icon-quanbu ml-3"></i><span>全部</span></div>
        <div @click="getMoodList('1')"><i class="iconfont icon-sousuo-zuire ml-3"></i><span>动态广场</span></div>
        <div @click="getMoodList('7')"><i class="iconfont icon-huati1 ml-3"></i><span>话题吐槽</span></div>
        <div @click="getMoodList('6')"><i class="iconfont icon-tebieguanzhu ml-3"></i><span>提问</span></div>
        <div @click="getMoodList('4')"><i class="iconfont icon-pengyouquan ml-3"></i><span>好友圈</span></div>
      </div>
    </div>
    <div class="box mb-3 shadow-sm rounded bg-white view-box overflow-hidden">
      <hot-topic></hot-topic>
    </div>
    <join-us></join-us>
  </aside>
</template>

<script>
import Bus from '@/components/common/eventBus.js';
import JoinUs from '@/components/common/joinUs.vue';
import HotTopic from '../common/hotTopic.vue';

export default {
  data() {
    return {
    };
  },
  components: { JoinUs, HotTopic },
  methods: {
    getMoodList(type) {
      Bus.$emit('changeMoodType', type);
    },
  },
};
</script>

<style scoped lang="scss">
.Myulli {
  div {
    font-size: 14px;
    margin-top: 5px;
    i {
      color: #FA5757;
       font-size: 20px;
    }
    span{
      margin-left:15px;
    }
  }
  div:hover{
    background: #E1E1E2;
    cursor:pointer
  }
}
</style>
